import React, { useState, useEffect } from 'react'
import { NavBar } from 'antd-mobile';
import Header from './../newsComponents/news-header/index'
import './index.scss'

function ChatDetail(props) {

  return (
    <>
      {/* 有多少个时间段就有多少个 ul , 再在ul 里面循环 li */}
      <ul className="news_chat_content_chatdetail">
        <li className="news_chat_content_chatdetail_time">星期二 6:00</li>
        {/* l 为朋友消息, 左浮动, r 为我的消息, 右浮动 */}
        <li className="news_chat_content_chatdetail_itemfr ">
          <img src="/images/tupian_06.gif" alt="" />
          <div className="news_chat_content_chatdetail_itemfr_msg" >
            <span >游园惊梦也好VIP了</span>
            <i className="smallAngle"></i>
          </div >
        </li>
        <li className="news_chat_content_chatdetail_itemmy ">
          <div className="news_chat_content_chatdetail_itemmy_msg" >
            <span>游园惊梦也好看 特别美 后面全 都要VIP了</span>
            <i className="smallAngle"></i>
          </div >
          <img src="/images/tupian_06.gif" alt="" />
        </li>
      </ul>
    </>
  )
}

function ChatFooter() {
  const [toggle, setToggle] = useState(false)


  return (
    <>
      <NavBar
        mode="light"
        icon={toggle ?
          <img src='/images/keyboard-icon.png' alt='' />
          :
          <img src='/images/Voice-icon.png' alt='' />}
        onLeftClick={() => setToggle(!toggle)}
        rightContent={<img src='/images/AddTo-icon.png' alt='' />}
      >

        {
          toggle ?
            <button className='news_chat_footer_input voice_btn' >按住  说话</button>
            :
            <>
              <input type="text" className='news_chat_footer_input' />
              <img src="/images/Expression-icon.png" alt="" className='news_chat_footer_expression' />
            </>
        }
      </NavBar>
    </>
  )
}
function Com(props) {
  const [chatData, setChatData] = useState()
  useEffect(() => {
    //  从地址获取到id在这里请求数据
    setChatData({id:2})
  },[])
  
  return (
    <>
      <div className="container">
        <Header props={props} rightContent='/images/ellipsis.png' rightClick={() => {
          props.history.push(`/news/personalProfile/${chatData.id}`)
        }} title='好友名字' classNames='chat_header' />
        <div className="content news_chat_content">
          <ChatDetail />
        </div>


        <footer className='footer news_chat_footer'>
          <ChatFooter />
        </footer>
      </div>
    </>
  )
}
export default Com